<template>
  <div class="home">
    <div class="photo">

    </div>
    <p>我是宋英男</p>
    <span>一个</span>
    <span id="net_name"></span>
    <span id="other"></span>
    <div>
      <el-button>移动端</el-button>
      <el-button>PC端</el-button>
    </div>
  </div>
</template>
<script>
    import { init } from 'ityped'

    export default {
        name: 'home',
        components: {

        },
        mounted() {
            let ele_net_name = document.querySelector('#net_name');
            let otherElement = document.querySelector('#other');
            init(ele_net_name, { showCursor: true, strings: ['从业五年的前端攻城狮', '专注于数据可视化的前端攻城狮','五年工作经验热衷于数据可视化的前端工程师'] ,typeSpeed:150,loop:false,disableBackTyping:false});

        }
    }
</script>
<style>
  body,html{
    background: black;
  }
  .home{
    color: white;
  }
  .ityped-cursor {
    font-size: 2.2rem;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
  }
  @keyframes blink {
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes blink {
    100% {
      opacity: 0;
    }
  }
  @-moz-keyframes blink {
    100% {
      opacity: 0;
    }
  }
</style>
